<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>jQuery UI Dialog - Modal confirmation</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
            window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"><\/script>');
        </script>
    </head>
    <body>
        <a href="javascript:void(0);" id="a1">Confirm</a>
        <p></p>
        <a href="javascript:void(0);" id="a2">Confirm2</a>
        <div id='modal_dialog'>
            <div class='title'>
            </div>
            <input type='button' value='yes' id='btnYes' />
            <input type='button' value='no' id='btnNo' />
        </div>
        <script>
            (function (mycode) {

                // The global jQuery object is passed as a parameter
                mycode(window.jQuery, window, document);

            }(function ($, window, document) {
                function myconfirm()
                {
                    if (confirm('Are You Sure ...'))
                        alert("Si");
                    else
                        alert("No");
                }

                //function showModalConfirmDialog() {
                    dialog('Are you sure you want to do this?',
                            function () {
                                alert("yes");
                            },
                            function () {
                                alert("no");
                            }
                    );
               //}

                function dialog(message, yesCallback, noCallback) {
                    $('.title').html(message);
                    var dialog = $('#modal_dialog').dialog();

                    $('#btnYes').click(function () {
                        dialog.dialog('close');
                        yesCallback();
                    });
                    $('#btnNo').click(function () {
                        dialog.dialog('close');
                        noCallback();
                    });
                }
                
                $('#a1').click(function (event) {
                    myconfirm();
                });
                $('#a2').click(function (event) {
                    showModalConfirmDialog();
                });
            }));
        </script>
    </body>
</html>
